<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">编辑健康档案</view>
            <view class="right">
                <u-icon name="checkmark" size="32" color="#333" @click="saveInfo"></u-icon>
            </view>
        </view>
        
        <!-- 基本信息编辑 -->
        <view class="section">
            <view class="title">基本信息</view>
            <view class="form">
                <view class="form-item">
                    <view class="label">头像</view>
                    <view class="avatar" @click="editAvatar">
                        <image :src="userInfo.avatar" mode="aspectFill"></image>
                        <view class="edit">
                            <u-icon name="camera" size="24" color="#fff"></u-icon>
                        </view>
                    </view>
                </view>
                
                <view class="form-item">
                    <view class="label">姓名</view>
                    <input 
                        type="text" 
                        v-model="userInfo.name" 
                        placeholder="请输入姓名"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">性别</view>
                    <view class="radio-group">
                        <view 
                            class="radio" 
                            :class="{'active': userInfo.gender === '男'}"
                            @click="userInfo.gender = '男'"
                        >男</view>
                        <view 
                            class="radio" 
                            :class="{'active': userInfo.gender === '女'}"
                            @click="userInfo.gender = '女'"
                        >女</view>
                    </view>
                </view>
                
                <view class="form-item">
                    <view class="label">年龄</view>
                    <input 
                        type="number" 
                        v-model="userInfo.age" 
                        placeholder="请输入年龄"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">身高(cm)</view>
                    <input 
                        type="number" 
                        v-model="userInfo.height" 
                        placeholder="请输入身高"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">体重(kg)</view>
                    <input 
                        type="number" 
                        v-model="userInfo.weight" 
                        placeholder="请输入体重"
                        class="input"
                    />
                </view>
            </view>
        </view>
        
        <!-- 健康指标编辑 -->
        <view class="section">
            <view class="title">健康指标</view>
            <view class="form">
                <view class="form-item" v-for="(item, index) in indicators" :key="index">
                    <view class="label">{{item.label}}</view>
                    <view class="input-group">
                        <input 
                            type="text" 
                            v-model="item.value" 
                            :placeholder="'请输入' + item.label"
                            class="input"
                        />
                        <view class="unit">{{item.unit}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                avatar: '/static/images/avatar.png',
                name: '张先生',
                gender: '男',
                age: 45,
                height: 175,
                weight: 70
            },
            indicators: [
                {
                    label: '血压',
                    value: '120/80',
                    unit: 'mmHg',
                    status: 'normal'
                },
                {
                    label: '血糖',
                    value: '5.6',
                    unit: 'mmol/L',
                    status: 'normal'
                },
                {
                    label: '心率',
                    value: '75',
                    unit: '次/分',
                    status: 'normal'
                },
                {
                    label: '血氧',
                    value: '98',
                    unit: '%',
                    status: 'normal'
                }
            ]
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        saveInfo() {
            // 保存信息
            uni.showToast({
                title: '保存成功',
                icon: 'success'
            })
            setTimeout(() => {
                this.goBack()
            }, 1500)
        },
        editAvatar() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.userInfo.avatar = res.tempFilePaths[0]
                }
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .form {
            .form-item {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .label {
                    width: 160rpx;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .avatar {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 60rpx;
                    position: relative;
                    
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 60rpx;
                    }
                    
                    .edit {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 40rpx;
                        height: 40rpx;
                        background-color: rgba(0, 0, 0, 0.5);
                        border-radius: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                
                .radio-group {
                    display: flex;
                    
                    .radio {
                        width: 100rpx;
                        height: 60rpx;
                        border: 2rpx solid #E8E8E8;
                        border-radius: 30rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28rpx;
                        color: #666;
                        margin-right: 20rpx;
                        
                        &.active {
                            background-color: #E6F7FF;
                            border-color: #1890FF;
                            color: #1890FF;
                        }
                    }
                }
                
                .input-group {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    
                    .input {
                        flex: 1;
                        font-size: 28rpx;
                        color: #333;
                    }
                    
                    .unit {
                        font-size: 28rpx;
                        color: #999;
                        margin-left: 10rpx;
                    }
                }
            }
        }
    }
}
</style> 